<template>
	<view class="container-sale">
	  <view class="bottom">
	    <date-select ref="presel" @open="open(0)" class="list-select" :showMonth="false" @change="change($event,0)" v-if="list.length"></date-select>
	    <view v-for="(item,index) in list" :key="index" >
	      <!-- <date-select v-if="index == 0" @open="open(index);" :id="'select'+index" ref="list" class="list-select"  :showMonth="false" @change="change($event,'select'+index)"></date-select> -->
		  <view class="list-view" @click="tap(index)">
			  <view class="view-title">
				<view >
				{{item.name + "[" + item.start_time_short + "--" + item.end_time_short + "[" + item.status + "]"}}
				</view>
			  </view>
			  <view class="data-bottom">
				<view class="data-show">
				  <view>{{item.order_num}}</view>
				  <view>订单</view>
				</view>
				<view class="data-show">
				  <view>{{item.order_money}}</view>
				  <view>总金额</view>
				</view>
			  </view>
			</view>
	    </view>
		
		<date-select ref="detailsel" @open="open(-1)" class="list-select" :showMonth="true" @change="change($event,-1)" v-if="Object.keys(detail).length"></date-select>
		<view class="list-view" @click="tap(-1)" v-if="Object.keys(detail).length">
			  <view class="view-title">
					<view>增补零售</view>
			  </view>
			<view class="data-bottom">
				<view class="data-show">
				  <view>{{detail.order_num}}</view>
				  <view>订单</view>
				</view>
				<view class="data-show">
				  <view>{{detail.order_money}}</view>
				  <view>总金额</view>
				</view>
			</view>
		</view>
		
	  </view>
	</view>
</template>

<script>
	import dateSelect from "../../../components/select-date/select-date.vue"
	export default {
		data(){
			return {
				list:[],
				detail:{},
				query:{
					detailsDate:{year:'2020',month:'0'},
					preDate:{year:'2020'},
				}
			}
		},
		components:{
			dateSelect
		},
		onLoad (options) {
		    this.getPreSaleList()
		    this.getSaleList()
		    this.changedNaviTitle()
		  },
		methods:{
			
			
			
			  getPreSaleList () {
			    const schoolId = this.$store.getters.currentSchool.school_id
				this.$api.getSizeOder({school_id : schoolId,time_year:this.query.preDate.year}).then((rep) =>{
					let {data} = rep.data
					if(data)
					this.disposePreSaleList(data)
			      })
			  },
			
			  getSaleList () {
			    const schoolId = this.$store.getters.currentSchool.school_id
				this.$api.getRetailOrder({school_id : schoolId,time_year:this.query.detailsDate.year,time_month:this.query.detailsDate.month}).then((rep) =>{
					let {data} = rep.data
					if(data)
					this.disposeSaleList(data)
				  })
			  },
			
			  disposePreSaleList (list) {
			    for (let obj of list){
			      obj.start_time_short = obj.start_time.substring(0,10)
			      obj.end_time_short = obj.end_time.substring(0,10)
			      obj.status = this.dataCompare(obj.end_time) ? '正在进行' : '已结束'
			    }
			    // let ls = list
			    // if (this.list.length){
			    //   ls = list.concat(this.list)
			    // }
				this.list = list
			  },
			
			  disposeSaleList (data) {
				  this.detail = data;
			    // this.list.push(list)
			  },
			
			  dataCompare (endTime) {
			    //当前时间
			    let nowTime = new Date()
			    let _endTime = new Date(endTime)
			
			    if(nowTime.valueOf() > _endTime.valueOf()){
			      return false
			    }else{
			      return true
			    }
			  },
			
			  changedNaviTitle () {
			    const school = this.$store.getters.currentSchool
			    uni.setNavigationBarTitle({
					title: school.school_name + '销售'
				})
			  },
			  tap (index) {
				  let item 
				  if(index === -1)
					item = this.detail
				  else
					item = this.list[index]
			      const status = item.status
			      const saleId = item.order_id
			      let date = this.query.detailsDate.year
				  let month = 0;
			      
			      let type = 1
				  let ispay = item.is_pay
			      if (status){
					date = this.query.preDate.year
			        type = 2
			      }else{
					month = this.query.detailsDate.month
				  }
			      uni.navigateTo({
					url:'../list/list' + '?type=' + type + '&id=' + saleId + '&year=' + date + '&month=' + month + '&ispay=' + ispay
			      })
			    },
			change(item,idx){
				// console.log(idx)
				// this.detailsDate = item
				// this.$refs.list.map((v,index)=>{
				// 	console.log("index"+index)
				// 	console.log("v"+v)
				// console.log("item"+JSON.stringify(item))
				// 	if(index == 0){
				// 		this.query.preDate = item
				// 		this.getPreSaleList()
				// 	}else{
				// 		this.query.detailsDate = item
				// 		this.getSaleList()
				// 	}
				// })
				
				if(idx == 0){
					this.query.preDate = item
					this.getPreSaleList()
				}else{
					this.query.detailsDate = item
					this.getSaleList()
				}
				// let view = uni.createSelectorQuery().in(this).select("#"+idx);
				// view.fields({
				//   size: true,
				//   scrollOffset: true
				// }, data => {
				//   console.log("得到节点信息" + JSON.stringify(data));
				//   console.log("节点的宽为" + data.width);
				// }).exec();
				
				// view.boundingClientRect(data => {
				//   console.log("得到布局位置信息" + JSON.stringify(data));
				//   console.log("节点离页面顶部的距离为" + data.top);
				// }).exec();
			},
			open(idx){
				console.log("idx"+idx)
				console.log(this.$refs.detailsel)
				if(idx == 0){
					if(this.$refs.detailsel)
						this.$refs.detailsel.close()
				}else{
					if(this.$refs.presel)
						this.$refs.presel.close()
				}
					
				
				// this.$refs.list.map((v,index)=>{
				// 	// console.log("index"+index)
				// 	// console.log("v"+v)
				// 	// 选择一个日期选择器时，关闭其他日期选择器
				// 	if(idx != index){
				// 		v.close()
				// 	}
				// })
				
				// let views = uni.createSelectorQuery().in(this).selectAll('.list-select');
				// views.boundingClientRect(data => {
				//   data.map((d,index)=>{
				// 	  console.log("得到节点信息" + JSON.stringify(d));
				// 	  console.log("节点的宽为" + d.width);
				// 	  console.log("index" + index);
				// 	  if(idx != index){
				// 		  this.selectComponent(d.id).close()
				// 	  }
				//   })
				// }).exec();
				
			}
				
		}
	}
	
</script>

<style lang="scss">
	.container-sale{
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: space-between;
	  box-sizing: border-box;
	}
	
	.list-view{
	  margin-left: 10rpx;
	  margin-right: 10rpx;
	  height: 300rpx;
	  background-color: #F5F5F5;
	  border: 1px solid #ddd;
	  padding-bottom: 24rpx;
	  margin-top: 24rpx;
	}
	
	.list-view:nth-child(2){
	  margin-top: 0rpx;
	}
		
	.list-select{
	  display: block;
	  margin-right: 10rpx;
	}
	
	.list-select:nth-child(n+1){
	  margin-top: 24rpx;
	}
	
	.bottom{
	  margin-top: 20rpx;
	  width: 100%;
	}
	.data-bottom{
	  display: flex;
	  height: 80%;
	}
	.view-title{
	  margin-top: 10rpx;
	  padding-bottom: 10rpx;
	  border-bottom: 1px solid #ddd;
	  font-size: 14px;
	}
	.view-title > view{
	  margin-left: 20rpx;
	}
	.data-show{
	  width: 50%;
	  display: inline-block;
	  margin-top: 10rpx;
	  text-align: center;
	  align-self: center;
	}
	.data-show > view:nth-child(1){
	  font-size: 30px;
	}
</style>
